<template>
    <div class="products">
        <van-dropdown-menu>
            <van-dropdown-item title="综合" disabled />
            <van-dropdown-item title="价格" v-model="price" :options="priceArr" @change="priceChange" />
            <van-dropdown-item title="分类" v-model="category" :options="filterCategory" @change="changeCategory" />
        </van-dropdown-menu>
        <Chanpin :chanpinArr="goodsList" v-if="this.goodsList.length>0"/>
        <van-empty image="search" description="暂无商品" v-else/>
    </div>
</template>

<script>
    import Chanpin from '@/components/Chanpin.vue'
    import {
        ProductsSearchApi
    } from '@/request/api'
    export default {
        props: ["keyword"],
        data() {
            return {
                price: "desc",
                category: 0,
                categoryArr: [],
                priceArr: [{
                        text: '价格由高到低',
                        value: 'desc'
                    },
                    {
                        text: '价格由低到高',
                        value: 'asc'
                    },
                ],
                // 产品列表的数组
                goodsList: [],
                filterCategory: [],
                page: 1,
                size: 100,
                order: "desc",
                categoryId: 0,


            }
        },
        created() {
            this.ProductsSearch()
        },
        methods: {
            // 封装了一个产品搜索的函数
            ProductsSearch() {
                ProductsSearchApi({
                    keyword: this.keyword,
                    size: this.size,
                    categoryId: this.categoryId,
                    page: this.page,
                    order: this.order,
                    sort: this.sort,
                }).then(res => {
                    // console.log(res.data);
                    if (res.errno === 0) {
                        let {
                            goodsList,
                            filterCategory
                        } = res.data;
                        this.goodsList = goodsList;
                        let filterCategory1 = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text')
                            .replace(/id/g, 'value'))
                        // filterCategory需要把name替换成text,把id替换成value
                        this.filterCategory = filterCategory1;
                        this.filterCategory.map(item => {
                            if (item.checked) {
                                this.category = item.value;
                            }
                        })
                    }
                })
            },

            changeCategory(val) {

                this.categoryId = val;
                // console.log(this.category);
                this.ProductsSearch();
            },
            priceChange(val) {
                this.order = val;
                this.sort = "price"; // 把排序的形式按照价格来
                this.ProductsSearch(); // 调用产品搜索函数

            }
        },
        components: {
            Chanpin
        }
    }
</script>

<style lang="less" scoped>
.products {
    min-height: calc(100vh - 54px);
    background-color: rgb(239,239,239);
}
</style>